<div>
  <nz-modal
    [(nzVisible)]="forgetPasswordVisible"
    [nzTitle]="modalTitle"
    [nzContent]="modalContent"
    (nzOnCancel)="handleCancel()"
    nzCentered
    [nzFooter]=null
  >
    <ng-template #modalTitle>{{title}}</ng-template>

    <ng-template #modalContent>
      <nz-spin [nzSpinning]="isSpinning">
        <div class="content">
          <form nz-form [formGroup]="validateForm">

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="mobile">手机号码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入手机号码!">
                <input type="text" nz-input formControlName="mobile" placeholder="手机号码"/>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="newPassword">新密码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入新密码!" [nzErrorTip]="passwordErrorTpl!">
                <input type="password" minlength="6" nz-input formControlName="newPassword" placeholder="新密码"
                       (ngModelChange)="validateConfirmPassword()" readonly onfocus="this.removeAttribute('readonly')"/>
                <ng-template #passwordErrorTpl let-control>
                  <ng-container *ngIf=" control.hasError('minlength')">密码最小为6位数</ng-container>
                  <ng-container *ngIf="control.hasError('required')">请输入登录密码</ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>


            <nz-form-item>
              <nz-form-label [nzSm]=" 6" [nzXs]="24" nzRequired nzFor="mobile">确认密码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入注册手机号码!" [nzErrorTip]="confirmPasswordErrorTpl">
                <input type="password" minlength="6" nz-input formControlName="confirm" placeholder="请输入确认密码" readonly
                       onfocus="this.removeAttribute('readonly');"/>
                <ng-template #confirmPasswordErrorTpl let-control>
                  <ng-container *ngIf="control.hasError('required')">请输入确认密码!</ng-container>
                  <ng-container *ngIf="control.hasError('confirm')">您输入的两个密码不一致!</ng-container>
                  <ng-container *ngIf="control.hasError('minlength')">密码最小为6位数</ng-container>
                </ng-template>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="checkTimes">验证码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入验证码!">
                <div style="display: flex">
                  <input type="text" nz-input formControlName="verification" placeholder="验证码"/>
                  <button nz-button nzType="primary" style="margin-left: 10px"
                          (click)="getCode()">{{smsCodeText}}</button>
                </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item nz-row class="register-area" style="margin-top: 30px">
              <nz-form-control [nzSpan]="24" style="text-align: center">
                <button nz-button type="button" (click)="handleCancel()" style="width: 100px;margin-right: 40px">取消
                </button>
                <button (click)="submit()" nz-button nzType="primary" style="width: 100px">确定</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
      </nz-spin>
    </ng-template>
  </nz-modal>
</div>
